
In this tutorial, you will learn how to use the MOVE, DRAW, and PLOT commands in BBC BASIC to create and fill shapes.
By the end you will understand:
- How screen modes work
- How coordinates work
- How to draw triangles, rectangles, circles and ellipses
- How to change colours
- How to fill shapes properly
You can use an online BBC Basic emulator to complete his challenge:
️BBC Micro Screen Modes
Before we start drawing on the screen let’s investigate the different screen modes available on a BBC Micro.
Effectively using BBC Basic you can change the screen Mode and resolution using the following instruction:
MODE number
When creating a computer program in BBC Basic, there are 8 modes to choose from as described below:
| Mode |
Type |
Resolution |
Colours |
| MODE 0 |
Graphics |
640 × 256 |
2 |
| MODE 1 |
Graphics |
320 × 256 |
4 |
| MODE 2 |
Graphics |
160 × 256 |
16 |
| MODE 3 |
Text |
80 × 25 text |
2 |
| MODE 4 |
Graphics |
320 × 256 |
2 |
| MODE 5 |
Graphics |
160 × 256 |
4 |
| MODE 6 |
Graphics |
320 × 256 |
2 |
| MODE 7 |
Teletext |
40 × 25 text |
8 (Teletext) |
Tip: MODE 2 is great for colourful drawings.
Understanding Coordinates

- (0,0) is the bottom-left of the screen
- X increases to the right, from 0 to 1279.
- Y increases upwards, from 0 to 1023
Note that the (X,Y) coordinates help you position your “pen” on a 1280 x 1024 canvas/screen whatever mode you are opting for for your programme. The resolution set by selecting a mode only impacts on the size of the pixels displayed on screen. (Hence on the number of pixels you can display on the screen). For instance with mode 2, each pixel will be 8 graphic units wide by 4 graphic units wide. Hence you can only display 160 pixels accross the screen. (X,Y) coordinates used when drawing on the screen use graphic units (X between 0 and 1279 and Y between 0 and 1023) instead of pixels.
MOVE() and DRAW() to Draw Lines ✏️
To draw lines and shapes we will mainly use two commands: MOVE() and DRAW().
MOVE moves without drawing.
DRAW draws a line from the current position.
For instance:
10 MODE 2
20 MOVE 100,100
30 DRAW 200,100
This draws a horizontal line on screen.
Drawing a Shape
To draw a shape, we will need to draw each line one by one, joining the relevant set of (X,Y) coordinates.
For instance to draw a rectangle:
10 MODE 2
20 MOVE 150,100
30 DRAW 350,100
40 DRAW 350,200
50 DRAW 150,200
60 DRAW 150,100
Changing Colours
Use GCOL() instruction to change drawing colour:
GCOL 0,2
The second number selects the colour. You can start using the following colour codes for your drawings:

Understanding the PLOT Command
The PLOT() command can be used as either as an alternative to or alongside the DRAW() and MOVE() commands. It enables to draw more complex shapes including circles and ellipses. It is also used to “close shapes” and fill them in with a colour.
The structure of this command is:
PLOT mode, x, y
The first parameter (mode) tells BBC BASIC what type of graphics action to perform.
Filling a Triangle
To fill a triangle, use:
PLOT 85, x, y
85 fills a triangle using:
- The last two graphics points visited
- The new coordinate (x,y)
Example:
10 MODE 2
20 GCOL 0,2
30 MOVE 200,100
40 DRAW 300,200
50 DRAW 100,200
70 PLOT 85,200,100
Using BBC Basic it is possible to condense your code by writting multiple instructions on the same line using a colon (:) between each instruction: e.g.
10 MODE 2
20 GCOL 0,2
30 MOVE 200,100:DRAW 300,200:DRAW 100,200:PLOT 85,200,100
Filling a Rectangle
To fill a rectangles, you will need to know the coordinates of the top left and bottom right corners of your rectangle. The commands are:
MOVE xBottomLeft,yBottomLeft
PLOT 101, xTopRight, yTopRight
101 fills the shape formed by:
- The last visited point (e.g. Bottom left corner)
- The new (x,y) coordinates (e.g. Top right corner)
- These two points are used for the two opposite corners of the rectangle to fill in
Example:
10 MODE 2
20 GCOL 0,3
30 MOVE 150,100
40 PLOT 101,350,200
Drawing Circles
The commands to draw a circle outline is:
PLOT 145, radius, 0
Example:
10 MODE 2
20 GCOL 0,3
30 MOVE 200,200 :REM 200,200 are the coordinates for the center
40 PLOT 145,100,0 :REM 145 means draw an outline, 100 is the radius
145 = circle outline.
Filled Circle
The commands to draw a filled circle is:
PLOT 153, radius, 0
Example:
10 MODE 2
20 GCOL 0,3
30 MOVE 300,300 :REM 200,200 are the coordinates for the center
40 PLOT 153,100,0 :REM 153 means draw filled circle, 100 is the radius
153 = filled circle.
Summary Table
| Shape |
Outline Mode |
Filled Mode |
| Triangle |
Use DRAW |
85 |
| Rectangle / Parallelogram |
Use DRAW |
101 |
| Circle |
145 |
153 |
Challenge #1: Drawing Flags by Combining Shapes
Use all the skills described in this blog post to draw the following flags n the screen:

Challenge #2: Complete the 3D Cube

Here is the code to draw a cube in 3D. However some edges are missing. Add the correct MOVE and DRAW commands to complete this code.
10 MODE 2
20 GCOL 0,7
30 REM Front square
40 MOVE 200,200
50 DRAW 400,200
60 DRAW 400,400
70 DRAW 200,400
80 DRAW 200,200
90 REM Back square
40 MOVE 250,250
50 DRAW 450,250
60 DRAW 450,450
70 DRAW 250,450
80 DRAW 250,250
150 REM Connect corners
160 MOVE 200,200
170 DRAW 250,250
180 MOVE 400,200
190 DRAW 450,250
200 REM Add code for the missing edges of our cube...
Extension Task:
- Fill one face of the cube.
- Use different colours for each face.
- Animate the cube by shifting coordinates in a loop.